{% extends "employee/employee_skeleton.html" %}

{% block content %}
    <section id="main-content">
      <section class="wrapper">
        <h3><i class="fa fa-angle-right"></i>{{ session['employee_info'][0] }}'s BILLS</h3>
        <div class="row mb">
          <!-- page start-->
          <div class="content-panel">
            <div class="adv-table">
              <table cellpadding="0" cellspacing="0" border="0" class="display table table-bordered"
                id="hidden-table-info">
                <thead>
                  <tr>
                    <th>编号</th>
                    <th>使用人</th>
                    <th class="hidden-phone">数额(￥)</th>
                    <th class="hidden-phone">原因</th>
                    <th class="hidden-phone">时间</th>
                  </tr>
                </thead>
                  <tbody>
                    {% for message in result %}
                      <tr class="gradeA">
                        <td>{{ message[0] }}</td>
                        <td>{{ message[1] }}</td>
                        <td>{{ message[2] }}</td>
                        <td>{{ message[3] }}</td>
                        <td>{{ message[4] }}</td>
                      </tr>
                    {% endfor %}
                  </tbody>
              </table>
            </div>
          </div>
          <!-- page end-->
        </div>
        <!-- /row -->
      </section>
      <!-- /wrapper -->
    </section>

{% endblock %}

{% block script %}
  <script type="text/javascript">
    /* Formating function for row details */
    function fnFormatDetails(oTable, nTr) {
      var aData = oTable.fnGetData(nTr);

      var sOut = '<form method="post">"';
      sOut += '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">';
      sOut += '<tr><td>编号</td><td><input disabled name="billno" class="form-control" value="' + aData[1] + '"</input></td></tr>';
      sOut += '<tr><td>员工</td><td><input disabled name="user" class="form-control" value="' + aData[2] + '"</input></td></tr>';
      sOut += '<tr><td>金额(￥)</td><td><input disabled name="amount" class="form-control" value="' + aData[3] + '"</input></td></tr>';
      sOut += '<tr><td>原因</td><td><input disabled name="reason" class="form-control" value="' + aData[4] + '"</input></td></tr>';
      sOut += '<tr><td>时间</td><td><input disabled name="time" class="form-control" value="' + aData[5] + '"</input></td></tr>';
      sOut += '</table>';
      sOut += '</form>';
      return sOut;
    }

    $(document).ready(function () {
      /*
       * Insert a 'details' column to the table
       */
      var nCloneTh = document.createElement('th');
      var nCloneTd = document.createElement('td');
      nCloneTd.innerHTML = '<img src="../static/lib/advanced-datatable/images/details_open.png">';
      nCloneTd.className = "center";

      $('#hidden-table-info thead tr').each(function () {
        this.insertBefore(nCloneTh, this.childNodes[0]);
      });

      $('#hidden-table-info tbody tr').each(function () {
        this.insertBefore(nCloneTd.cloneNode(true), this.childNodes[0]);
      });

      /*
       * Initialse DataTables, with no sorting on the 'details' column
       */
      var oTable = $('#hidden-table-info').dataTable({
        "aoColumnDefs": [{
          "bSortable": false,
          "aTargets": [0]
        }],
        "aaSorting": [
          [1, 'asc']
        ]
      });

      /* Add event listener for opening and closing details
       * Note that the indicator for showing which row is open is not controlled by DataTables,
       * rather it is done here
       */
      $('#hidden-table-info tbody td img').live('click', function () {
        var nTr = $(this).parents('tr')[0];
        if (oTable.fnIsOpen(nTr)) {
          /* This row is already open - close it */
          this.src = "../static/lib/advanced-datatable/images/details_open.png";
          oTable.fnClose(nTr);
        } else {
          /* Open this row */
          this.src = "../static/lib/advanced-datatable/images/details_close.png";
          oTable.fnOpen(nTr, fnFormatDetails(oTable, nTr), 'details');
        }
      });
    });
  </script>
{% endblock %}